@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font: inherit;font-size: 100%;vertical-align: baseline;}

html {line-height: 1;}
ol, ul {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;}
caption, th, td {text-align: left;font-weight: normal;vertical-align: middle;}
q, blockquote {quotes: none;}
q:before, q:after, blockquote:before, blockquote:after {content: "";content: none;}
a img {border: none;}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/*  全局样式 */
html {font-size: 100%;font-family: "黑体";}
body {font-family: "黑体";}
img {display: block;}

h1,
h4,
p,
ul,
li {margin: 0;padding: 0;list-style: none;}
a {-webkit-tap-highlight-color: transparent;text-decoration: none;}
input {-webkit-tap-highlight-color: transparent;}
select {-webkit-tap-highlight-color: transparent;}

input,
select,
textarea,
button {outline: none;border: none;font-family: '黑体';-webkit-appearance: none;}

section{ max-width: 520px; margin: 0 auto;}
.top{padding-top: 20%;}
.top img{width: 50%; margin: 0 auto; max-width: 213px;}
.logo{margin-top: 20px;}
.logo img{width: 80%; margin: 0 auto; max-width: 273px;}
.bottom{position: absolute; bottom: 20px; left: 0px; height: 200px; width: 100%;}
@media screen and (max-width:1080px) {
    .bottom a{
      height: 49px; 
      width: 157px;
      display: block;
      background-image: url('../images/little_icon.png');
      background-size: 389px;
      background-repeat: no-repeat;
      margin: 0 auto;
      border-radius: 8px;
      margin-top: 20px;
    }
    .bottom a:nth-child(1){
      background-position: 0px 0px;
    }
    .bottom a:nth-child(2){
      background-position: 0px -58px;
    }
    .bottom a span{
      float: right;
      height: 48px;
      width: 48px;
      display: block;
      background-image: url('../images/little_icon.png');
      background-size: 389px;
      background-repeat: no-repeat;
    }
    .bottom a:nth-child(1) span{
      background-position: -345px -37px;
    }
    .bottom a:nth-child(2) span{
      background-position: -345px 8px; 
    }
}
/** radio : 49/78; */
@media screen and (min-width:1081px) {
  .top img{max-width: 340px;}
  .logo img{max-width: 435px;}
  .logo{margin-top: 31px;}
  .bottom a{
    height: 78px; 
    width: 262px;
    display: block;
    background-image: url('../images/little_icon.png');
    background-size: 657px;
    background-repeat: no-repeat;
    margin: 0 auto;
    border-radius: 10px;
    margin-top: 20px;
  }
  .bottom a:nth-child(1){
    background-position: 0px -5px;
  }
  .bottom a:nth-child(2){
    background-position: 0px -102px;
  }
  .bottom a span{
    float: right;
    height: 78px;
    width: 78px;
    display: block;
    background-image: url('../images/little_icon.png');
    background-size: 657px;
    background-repeat: no-repeat;
  }
  .bottom a:nth-child(1) span{
    background-position: -589px -69px;
  }
  .bottom a:nth-child(2) span{
    background-position: -589px 8px; 
  }
}